<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-col :span="4"
        ><el-button
          type="primary"
          icon="el-icon-plus"
          @click="addDialogVisible = true"
          >添加权限</el-button
        ></el-col
      >
      <el-table
        :data="rightsList"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="title" label="权限名称" sortable width="180">
        </el-table-column>
        <el-table-column prop="status" label="权限状态" sortable width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="success">开启</el-tag>

            <el-tag v-else-if="scope.row.status === 0" type="danger"
              >关闭</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="url" label="url"> </el-table-column>
        <el-table-column prop="icon" label="icon"> </el-table-column>
        <el-table-column prop="path" label="前端路由"> </el-table-column>
        <el-table-column prop="method" label="方法"> </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="delRights(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      title="添加权限"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <el-form
        :model="addForm"
        ref="addFormRef"
        :rules="addFormRules"
        label-width="100px"
      >
        <el-form-item label="是否为菜单">
          <el-radio-group
            size="medium"
            v-model="addForm.is_menu"
            @change="selectIsMenu"
          >
            <el-radio-button border label="1">是</el-radio-button>
            <el-radio-button border label="0">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限名称" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="后台api" prop="url">
          <el-input v-model="addForm.url"></el-input>
        </el-form-item>
        <el-form-item label="前端路由" prop="path" v-show="is_show">
          <el-input v-model="addForm.path"></el-input>
        </el-form-item>
        <el-form-item label="icon" prop="icon">
          <el-input v-model="addForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="方法选择" v-show="!is_show">
          <el-radio-group size="medium" v-model="addForm.method">
            <el-radio border label="POST"></el-radio>
            <el-radio border label="GET"></el-radio>
            <el-radio border label="*"></el-radio>
            <el-radio border label="PUT"></el-radio>
            <el-radio border label="DELETE"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请选择父菜单">
          <el-cascader
            :options="options"
            :props="{ checkStrictly: true, value: 'id', label: 'title' }"
            clearable
            v-model="addForm.p_id"
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRights">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑权限"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <el-form
        :model="editForm"
        ref="editFormRef"
        :rules="editFormRules"
        label-width="100px"
      >
        <el-form-item label="是否为菜单">
          <el-radio-group
            size="medium"
            v-model="editForm.is_menu"
            @change="selectIsMenu"
          >
            <el-radio-button border label="1">是</el-radio-button>
            <el-radio-button border label="0">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限名称" prop="title">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="后台api" prop="url">
          <el-input v-model="editForm.url"></el-input>
        </el-form-item>
        <el-form-item label="前端路由" prop="path" v-show="is_show">
          <el-input v-model="editForm.path"></el-input>
        </el-form-item>
        <el-form-item label="icon" prop="icon">
          <el-input v-model="editForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="方法选择" v-show="!is_show">
          <el-radio-group size="medium" v-model="editForm.method">
            <el-radio border label="POST"></el-radio>
            <el-radio border label="GET"></el-radio>
            <el-radio border label="*"></el-radio>
            <el-radio border label="PUT"></el-radio>
            <el-radio border label="DELETE"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请选择父菜单">
          <el-cascader
            :options="options"
            :props="{ checkStrictly: true, value: 'id', label: 'title' }"
            clearable
            v-model="editForm.p_id"
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRights">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      addDialogVisible: false,
      editDialogVisible: false,
      is_show: false,
      addForm: {
        name: '',
        icon: '',
        path: '',
        url: '',
        method: '*',
        p_id: 0,
        is_menu: 0,
        title: ''
      },
      editForm: {},
      addFormRules: {
        title: [
          { required: true, message: '请输入权限名称', trigger: 'blur' },
          {
            min: 3,
            max: 20,
            messgae: '权限名称的长度在3到20个字符之间',
            trigger: 'blur'
          }
        ],
        url: [
          { required: true, message: '后台api路由不能为空', trigger: 'blur' }
        ]
      },

      editFormRules: {
        title: [
          { required: true, message: '请输入权限名称', trigger: 'blur' },
          {
            min: 3,
            max: 20,
            messgae: '权限名称的长度在3到20个字符之间',
            trigger: 'blur'
          }
        ],
        url: [
          { required: true, message: '后台api路由不能为空', trigger: 'blur' }
        ]
      },

      options: [],
      rightsList: []
    }
  },
  created () {
    //获取权限列表
    this.getRightsList()
  },
  methods: {
    selectIsMenu (val) {
      this.is_show = val == 1 ? true : false
      // this.$refs.addFormRef.resetFields()
    },
    async getRightsList () {
      const { data: res } = await this.$http.get('api/permission/list')
      if (res.errno !== 0) {
        return this.$message.error('获取权限列表失败')
      }


      //获取下拉列表
      let arr = res.data

      //   for (let i = 0; i < data.length; i++) {
      //     arr.push({
      //       value: data[i]['id'],
      //       label: data[i]['title'],
      //       children: []
      //     })
      //     if (data[i].children) {
      //       for (let j = 0; j < data[i].children.length; j++) {
      //         arr[i].children.push({
      //           value: data[i]['children'][j]['id'],
      //           label: data[i]['children'][j]['title'],
      //           disabled: true
      //         })
      //       }
      //     }
      //   }
      //   arr.unshift({ value: 0, label: '根节点' })



      this.rightsList = arr

      this.options = [{ id: 0, title: '根节点' }].concat(arr)
    },
    //添加权限
    addRights () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post(
          'api/permission/add',
          this.addForm
        )
        if (res.errno !== 0) {
          this.$message.error('添加权限失败')
        }
        this.$message.success('添加权限成功')
        this.addDialogVisible = false
        this.getRightsList()
      })
    },
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },

    editDialogClosed () {
      this.$refs.editFormRef.resetFields()
    },
    //展示编辑页面
    async showEditDialog (id) {
      const { data: res } = await this.$http.get('api/permission/edit?id=' + id)
      if (res.errno !== 0) {
        return this.$message.error('获取数据失败')
      }
      this.editForm = res.data
      this.editDialogVisible = true
    },
    editRights () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.put(
          'api/permission/edit',
          this.editForm
        )
        if (res.errno !== 0) {
          return this.$message.error('修改失败')
        }
        this.editDialogVisible = false
        this.getRightsList()
        this.$message.success('修改成功')
      })
    },
    async delRights (id) {
      const res = await this.$confirm(
        '此操作将永久删除该权限,是否继续',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (res !== 'confirm') {
        return this.$message.info('取消删除操作')
      }
      const { data: res2 } = await this.$http.delete(
        'api/permission/del?id=' + id
      )
      if (res2.errno !== 0) {
        return this.$message.error(res2.errmsg)
      }
      this.$message.success('删除成功')
      this.getRightsList()
    }
  }
}
</script>

<style lang="less" scoped></style>>
